<template>
	<view class="container">
		<up-navbar
		  :autoBack="true"
		  :placeholder="true"
		  bgColor="#fff"
		  title="发布话题"
		>
			<template #right>
				<view class="right-box" @click="sbmint">
					发布
				</view>
			</template>
		</up-navbar>

		<view class="page-bor">

		</view>

		<view class="page-text">
			<u--textarea v-model="textValue" placeholder="请输入内容" border="bottom" style="height: 360rpx;"></u--textarea>

			<view class="tab-box">
				<view class="tab-box-s" :class="tabIndex == 0 ? 'tab-color' : ''  " @click="tabIndex = 0,imgUrl=[]">
					上传图片
				</view>
				<view class="tab-box-s" :class="tabIndex == 1 ? 'tab-color' : ''  " @click="tabIndex = 1,imgUrl=[]">
					上传视频
				</view>
			</view>
			<view class="text-tips" >
				添加{{tabIndex == 0 ? '图片' : '视频' }}（可选，{{upNum}}个）
			</view>

			<view class="up-img-box" v-if="tabIndex == 0">
				<view class="" v-for="(item,index) in imgUrl" :key="index" style="position: relative;">
					<image class="up-img" :src="item" mode="aspectFill" @click="seeImg(item)"></image>
					<view class="del-box" @click="delObj(index)">
						<u-icon name="close" color='#fff' size="13"></u-icon>
					</view>
				</view>
				<image class="up-img" src="https://pili-vod.guanxikeji.com/fubao/img/1755329788089.png" mode="widthFix" @click="upImg"></image>

			</view>

			<view class="up-img-box" v-else>
				<view class="" v-for="item in imgUrl" style="position: relative;">
					<video class="up-img" :src="item" :show-center-play-btn='false'
                 :autoplay="true"
                 :show-play-btn='false' :show-fullscreen-btn='false' :controls='false'></video>
					<view class="del-box" @click="delObj(index)">
						<u-icon name="close" color='#fff' size="13"></u-icon>
					</view>
				</view>
				<image class="up-img" src="https://pili-vod.guanxikeji.com/fubao/img/1755329788089.png" mode="widthFix" @click="upImg"></image>
			</view>


		</view>


	</view>
</template>

<script setup>


const {
	proxy
} = getCurrentInstance();
const textValue = ref('')
const imgUrl = ref([])
const tabIndex = ref(0)
const upNum=computed(()=>{
	return tabIndex.value == 0 ? 9 : 1
})
function sbmint() {

	if(!textValue.value) {
		uni.showToast({
		    icon: "none",
		    title: '请输入内容!'
		})
		return
	}

	proxy.$request({
		url: `api/publishArticle/?code=${tabIndex.value}`,
		method: 'post',
		data:{
			brief:textValue.value,
			img:tabIndex.value == 0?  imgUrl.value.join(',') : '',
			video:tabIndex.value == 1? imgUrl.value.join(',') : '',
		},
		success(res) {
			if(res.errno == 0) {
				textValue.value = ''
				imgUrl.value = []
				uni.showToast({
				    icon: "none",
				    title: '发布成功'
				})

				setTimeout(()=>{
					uni.navigateBack()
				},2000)
			}
		}
	})
}

function toVideo(url) {
	console.log(123212312312)
	uni.navigateTo({
		url:`/pages/community/video?url=${url}`
	})
}


function delObj(index) {
	imgUrl.value.splice(index, 1);
}

function upImg() {
	console.log(imgUrl.value.length)

	if(imgUrl.value.length >= upNum.value) {
		uni.showToast({
		    icon: "none",
		    title: `${tabIndex.value == 0 ? '图片' : '视频'}最多上传${upNum.value}张!`
		})
		return
	}
  const length =upNum.value- imgUrl.value.length
	if(tabIndex.value == 0) {
		proxy.$Uplode(function (e) {
			imgUrl.value.push(e)
		},0, length)
	}else{
		proxy.$UplodeVideo(function (e) {
			imgUrl.value.push(e)
		},)
	}

}
function seeImg(item) {
	uni.previewImage({
		urls: imgUrl.value,
		longPressActions: {
			success: function(data) {
				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			},
			fail: function(err) {
				console.log(err.errMsg);
			}
		}
	});
}

</script>

<style lang="scss" scoped>
page{
	background-color: #fff;
}
.page-bor{
	height: 10rpx;
	background-color: #F8F8F8;
}
.right-box{
	width: 96rpx;
	height: 48rpx;
	background: #F63B29;
	border-radius: 12rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 48rpx;
}

.page-text{
	padding: 0 30rpx;
	.text-tips{
		margin: 20rpx 0;
	}
	.tab-box{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #8F8F8F;
		.tab-box-s{
			margin-right: 10rpx;
		}
		.tab-color{
			color:#000
		}
	}
	.up-img-box{
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		.del-box{
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			background-color: #000;
			width: 35rpx;
			height: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius:50%;
			z-index: 100000000;
		}
	}

}
.up-img{
	width: 220rpx;

	height: 220rpx;
}

</style>
